<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex布局</title>
	<style type="text/css">
	.flex-box{ display: flex;  background: #666; margin-bottom: 20px;}
	.flex-box .flex-item{ width: 20%; background: blue; color: #FFF;}
	.flex-box .flex-item1{ height: 90px;}
	.flex-box .flex-item2{ height: 120px;}
	.flex-box .flex-item3{ height: 50px;}
	</style>
	<style type="text/css">
	.flex-box1{ align-items: center;}
	.flex-box1 .flex-item3{ align-self: flex-start;}
	</style>
</head>
<body>
	<div>align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</div>
	<div class="flex-box flex-box1">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
</body>
</html>